<template>
	<view class="wrap">
		<text class="title">请输入新手机号</text>
		<text class="sub-title">通过安全环境检测可以换绑</text>
		<view class="from">
			<view class="from-item">
				<text class="area" @click="bindAreaCode">{{userPhone.countryNo}}</text>
				<input type="number" placeholder="请输入手机号" v-model="userPhone.mobile" placeholder-class="phl" />
			</view>
			<view class="from-item">
				<input type="number" style="width: 350rpx;" v-model="userPhone.code" placeholder="请输入验证码" placeholder-class="phl" />
				<text class="code" @click="getCode">{{codeMessage}}</text>
			</view>
			<button class="submit" @click="submit">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		updateMobile,
		smsCode
	} from '@/util/api.js'
	import {
		ref
	} from "vue";
	const userPhone = ref({
		mobile: "",
		countryNo: "+86",
		code: ""
	})
	// 获取短信
	const codeMessage = ref("获取验证码")
	let bok = true
	let num = 60
	const getCode = async ()=>{
		if(!userPhone.value.mobile){
			uni.showModal({
				title:"提示",
				content:"请输入手机号码",
				showCancel:false
			})
			return false
		}
		if(!bok) return false;
		bok = false
		uni.showLoading({
			mask:true
		})
		const result = await smsCode({countryNo:userPhone.value.countryNo,mobile:userPhone.value.mobile})
		uni.hideLoading()
		if(result.code!=200){
			bok = true
			codeMessage.value = "获取验证码"
			return false
		}
		let timer = setInterval(()=>{
			num--
			codeMessage.value = `${num}秒后重试`
			if(num<=0){
				bok = true
				codeMessage.value = "获取验证码"
				clearInterval(timer)
			}
		},1000)
	}
	const submit  = async ()=>{
		
		if(!userPhone.value.mobile){
			uni.showModal({
				title:"提示",
				content:"请输入手机号",
				showCancel:false
			})
			return false;
		}
		if(!userPhone.value.code){
			uni.showModal({
				title:"提示",
				content:"请输入验证码",
				showCancel:false
			})
			return false;
		}
		
		const result = await updateMobile(userPhone.value)
		if(result.code==200){
			uni.setStorageSync('token',result.data.token)
			uni.setStorageSync('tokenHead',result.data.tokenHead)
			uni.showModal({
				title:"提示",
				content:"修改成功",
				showCancel:false,
				success: () => {
					uni.navigateBack()
				}
			})
		}
		
	}
	const bindAreaCode = ()=>{
		uni.navigateTo({
			url:"/pages/areaCode/areaCode"
		})
	}
	uni.$on('onSelectAreaCode',(code)=>{
		
		userPhone.value.countryNo = code
	})
	
</script>

<style lang="scss">
	.title {
		display: block;
		margin: 38rpx;
		font-size: 38rpx;
		color: #333;
		font-weight: 800;
	}

	.sub-title {
		color: #999999;
		display: block;
		margin-left: 38rpx;
		font-size: 30rpx;
	}

	.from {
		margin-top: 38rpx;
		padding: 0 38rpx;

		.from-item {
			width: 519rpx;
			height: 100rpx;
			background: #F6F6FF;
			border-radius: 71rpx;
			margin-bottom: 38rpx;
			display: flex;
			align-items: center;
			padding: 0 77rpx;

			.phl {
				color: #999;
				font-size: 28rpx;
			}

			.area {
				display: block;
				margin-right: 38rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
			}

			.code {
				font-weight: bold;
				display: block;

				color: #333333;
				font-size: 28rpx;
			}
		}

		.submit {
			width: 673rpx;
			height: 100rpx;
			background: #0265FF;
			box-shadow: 0px 12rpx 23rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 71rpx;
			margin: 77rpx auto 38rpx;
			border: none;
			color: #fff;
			font-weight: 800;
			font-size: 38rpx;
			line-height: 100rpx;
		}

	}

	.wrap {
		overflow: hidden;
	}
</style>